<template>
  <div>
    <p>{{state}}</p>
    <button @click="myFn">按钮</button>
  </div>
</template>


<script>
/**
 * 1.roRef
 */
import { ref, toRef, toRefs } from "vue";
import { reactive } from "vue";
export default {
  name: "App",
  setup() {
    let obj = { name: "ls", age: 18 };
    /**
     * ref(obj.name) -> ref(ls)
     * ->reactive({value:ls})
     */
    // let state = ref(obj.name);
    // let state = toRef(obj, "name");
    let state = toRefs(obj);
    /**
     * ref->复制
     * toRef -> 引用
     * ref 和 toRef区别：
     * ref-> 复制，修改响应式数据不会影响以前的数据
     * toRef -> 引用，修改响应式数据会影响以前的数据
     * ref -> 数据发生改变，界面就会自动更新
     * toRef -> 数据发生改变，界面也不会自动更新
     * toRef 应用场景：
     * 如果想让响应式数据和以前的数据关联起来，并且更新响应式数据之后还不想更新ui，那么就可以使用
     */
    function myFn() {
      // state.value = "zs";
      /**
       * 结论：如果利用ref将某一个对象中的属性变成响应式的数据
       * 我们修改响应式的数据是不会影响到原始数据的
       */
      /**
       * 结论：如果利用toRef将某一个对象中的属性变成响应式的数据
       * 我们修改响应式的数据是会影响到原始数据的
       * 但是如果响应式的数据是通过toRef创建的，那么修改了数据并不会触发ui界面的更新
       */

      state.name.value = "zs";
      state.age.value = 666;
      console.log(obj);
      console.log(state);
    }
    return { state, myFn };
  }
};
</script>
